<template>
  <div>
    <el-row v-if="userInfo.user_type == 2" :gutter="24">
      <el-col v-if="indexData.xtxx" :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>系统消息</span>
          </div>
          <ul class="msg">
            <li
              class="msg-item"
              v-for="(item, index) in msgList"
              :key="index"
            >
              <p class="msg-item-str fl">{{item}}</p>
              <el-button type="text" class="msg-item-btn fr">详细</el-button>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col v-if="indexData.fkje" :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>付款金额</span>
          </div>
          <div>
            <v-chart ref="fkje" class="chart" :option="option"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row v-if="userInfo.user_type == 1" :gutter="24">
      <el-col v-if="indexData.xtxx" :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>系统消息</span>
          </div>
          <ul class="msg">
            <li
              class="msg-item"
              v-for="(item, index) in msgList"
              :key="index"
            >
              <p class="msg-item-str fl">{{item}}</p>
              <el-button type="text" class="msg-item-btn fr">详细</el-button>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col v-if="indexData.hdcc" :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span></span>
          </div>
          <v-chart ref="hdcs" class="chart" :option="option2"/>
        </el-card>
      </el-col>
      <el-col v-if="indexData.fkje" :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>付款金额</span>
          </div>
          <v-chart ref="fkje" class="chart" :option="option"/>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {getStaticUserInfo} from '@/utils/user'

  export default {
    props: {
      indexData: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    data() {
      return {
        userInfo: getStaticUserInfo(),
        bol: false,
        msgList: [],
        option2: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: 'item',
            data: [],
            type: 'line',
            areaStyle: {}
          }]
        },
        option: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: 'item',
            type: 'bar',
            barWidth: '60%',
            data: []
          }]
        },
      }
    },
    watch: {
      indexData: {
        deep: true,
        handler: function (newVal) {
          this.msgList = this.indexData.xtxx;
          if(this.indexData.fkje){
            let date = this.indexData.fkje.map(val => val.date)
            let count = this.indexData.fkje.map(val => parseFloat(val.count))
            this.option.xAxis.data = date
            this.option.series[0].data = count
            this.option.series[0].name = count
            this.$nextTick(() => {
              this.$refs.fkje.setOption(this.option)
            })
          }

          if(this.userInfo.user_type == 1) {
            let date2 = this.indexData.hdcc.map(val => val.date)
            let count2 = this.indexData.hdcc.map(val => parseFloat(val.count))
            this.option2.xAxis.data = date2
            this.option2.series[0].data = count2
            this.option2.series[0].name = count2
            this.$nextTick(() => {
              this.$refs.hdcs.setOption(this.option2)
            })
          }
        }
      }
    },

    methods: {},
  }
</script>

<style lang="scss" scoped>
  p {
    margin: 0;
  }

  ul {
    margin: 0;
  }

  li {
    overflow: hidden;
    list-style: none; /*去掉小圆点*/
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .msg {
    box-sizing: border-box;
    padding: 0 20px;

    &-item {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #EEEEEE;

      &-title {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
      }

      &-btn {
        position: relative;
        top: 8px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #358CFD;
      }
    }
  }


  .box-card {
    height: 375px;
    padding: 0 !important;
  }

  .chart {
    height: 300px !important;
  }

  .page-header {
    min-height: 145px;
    transition: $base-transition;


    .btn {
      width: 90%;
      height: 185px;
      padding-left: 20px;

      font-size: 20px;
      color: #fff;
      background-color: red;
      border-radius: 25px;

      &-title {
        margin-top: 20px;
      }
    }

    ::v-deep {
      * {
        transition: $base-transition;
      }

      .el-card__body {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
    }

    &-avatar {
      width: 60px;
      height: 60px;
      margin-right: 20px;
      border-radius: 50%;
    }

    &-tip {
      flex: auto;
      width: calc(100% - 200px);
      min-width: 300px;

      &-title {
        margin-bottom: 12px;
        font-size: 20px;
        font-weight: bold;
        color: #3c4a54;
      }

      &-description {
        font-size: $base-font-size-default;
        color: #808695;
      }
    }

    &-avatar-list {
      flex: 1;
      min-width: 100px;
      margin-left: 20px;
      text-align: right;

      p {
        margin-right: 9px;
        line-height: 0px;
      }
    }
  }
</style>
